<template>
  <div class="header">
    <div class="left">
      <img
        src="../assets/img/logo.png"
        alt=""
        class="logo"
        @click="gohome"
      >
      <!-- @click="GoToIndex" -->
    </div>
    <transition name="el-zoom-in-center">
      <div
        v-show="showSearch"
        class="center"
      >
        <el-select
          v-model="select"
          placeholder="宝贝"
          class="serch-select"
          size="mini"
          @change="SelectChange"
        >
          <el-option
            label="店铺"
            value="1"
          />
          <el-option
            label="宝贝"
            value="2"
          />
        </el-select>
        <el-input
          v-model="input1"
          class="serch-input"
          placeholder="输入你的关键字"
          size="mini"
          @keyup.native.13="Search"
        >
          <!-- @change="InputChange" -->
          <!-- @input="InputInput" -->
          <el-button
            slot="suffix"
            icon="el-icon-search"
            circle
            @click="Search"
          />
        </el-input>
      </div>
    </transition>
    <div class="right">
      <div
        v-show="!showSearch"
        ref="menu"
        class="menu"
      >
        <router-link
          class="menu-item"
          :class="!indexPaht ? 'active' : ''"
          tag="div"
          to="/"
        >
          首页
        </router-link>
        <div
          v-for="item in classify.slice(0, 5)"
          :key="item.id"
          class="menu-item"
          :class="indexPaht == item.id ? 'active' : ''"
          @click="changeitem(item)"
        >
          {{ item.cName }}
        </div>
      </div>
      <!-- <div v-if="showSearch" class="searchInput">
				<input ref="searchInput" v-model="searchContent" type="text" placeholder="云上管家自营店铺">
			</div> -->
			
			
      <div class="iconGroup">
        <img
          v-if="!showSearch"
          src="../assets/img/1.png"
          alt=""
          @click="search"
        >
        <div
          v-else
          @click="search"
        >
          <i
            class="el-icon-close"
            style="color: #000000;font-weight: bold;font-size: 1.2rem;"
          />
        </div>
        <img
          src="../assets/img/2.png"
          alt=""
          @click="person"
        >
        <img
          src="../assets/img/4.png"
          alt=""
          @click="goShoppingCart"
        >
        <!-- <img
	      src="../assets/img/3.png"
	      alt=""
	      @click="gohome"
	    > -->
        <!-- <i class="el-icon-search" @click="search" />
				<i class="el-icon-user" @click="person" />
				<i class="el-icon-shopping-cart-2" @click="goShoppingCart" />
				<i class="el-icon-house" @click="person" /> -->
      </div>
    </div>
  </div>
</template>
<!-- <script type="text/javascript" src=''></script> -->
<script>
	export default {
		name: "",
		components: {},
		data() {
			return {
				searchContent: "",
				showSearch: false,
				falgs: false,
				activeIndex: "1",
				indexPaht: "",
				classify: [{
					name: "首页",
					id: "1",
					path: "/",
				}, ],
				select: "2", // 搜索店铺/商品
				input1: "", // 搜索内容
			};
		},
		watch: {
			$route: function() {
				this.indexPaht = this.$route.query.id;
			},
			searchContent: function(val) {
				if (val != "") {
					this.$router.push({
						path: "/fruit",
						query: {
							userId: val,
						},
					});
				}
			},
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				this.$api.home.getClasses().then((res) => {
					if (res.code == 200) {
						this.classify = res.data;
					}
				});
			},
			changeitem(item) {
				this.activeIndex = item.id;
				sessionStorage.setItem('ChangeItemID', item.id)
				this.$router.push({
					path: "/cate",
					query: {
						id: item.id,
					},
				});
			},
			person() {
				if (localStorage.getItem("token")) {
					this.activeIndex = "";
					this.$router.push({
						path: "/person",
					});
				} else {
					// let url = encodeURIComponent(location.href.split('#')[0])
					// let url = encodeURIComponent("http://jtsc.hawkhawk.club/api/index/cas");
					// window.location.href = "http://issosit.ysyec.com/isso/login?service=" + url;
					let url = encodeURIComponent('https://mallmgt.inja.com/api/index/cas')
					window.location.href = "https://isso.inja.com/isso/login?service=" + url
				}

			},
			gohome() {
				window.location.href = "https://inja.com/portal"; // 正式
				// window.location.href = "http://portalsit.ysyec.com/portal/#cancel=true" // 测试
			},
			search() {
				this.showSearch = !this.showSearch
			},
			goShoppingCart() {
				this.$router.push({
					path: "/cart",
				});
			},
			// 点击logo回首页
			GoToIndex() {
				this.$router.push({
					path: "/",
				})
			},
			SelectChange(SelectChange) {
				console.log('改变搜索的值', SelectChange)
				
			},
			Search(){
				 this.$store.commit('setDemoValue', this.input1);  
				console.log('搜索', this.select, this.input1)
				if(this.select == 1){
					this.$router.push({
						path: "/shopPage",
						query: {
							select: this.select,
							input: this.input1,
							ShopID: ''
						},
					});
				}else{
					
					this.$router.push({
						path: "/Fruit",
						query: {
							select: this.select,
							input: this.input1,
						},
					});	
				}
				
			}
		},
	};
</script>

<style scoped lang="scss">
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 6.18rem;
		background: #fff;
		// background: rgba(0, 0, 0, 1);
		// opacity: 0.95;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6rem;
		z-index: 999;
	
		// .logo{
		//   width: 20rem;
		//   height: 2rem;
		// }
		.logo {
			cursor: pointer;
		}
	
		.left {
			// width: 50%;
			width: 45%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	
		.right {
			// flex: 1;
			height: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			filter: brightness;
			.menu {
				// width: 43rem;
				width: 50rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
	
				.menu-item {
					cursor: pointer;
					// font-size: 0.88rem;
					font-size: 1.125rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #666666;
					// font-weight: bold;
					// color: rgba(255, 255, 255, 1);
					// border-bottom: 1px solid #000;
					padding: 0.44rem 0;
	
					&.active {
						// color: #08c19d;
						color: #000;
						font-weight: 600;
						// border-bottom: 1px solid #08c19d;
					}
	
					&:hover {
						// color: #08c19d;
						color: #000;
						font-weight: 600;
					}
				}
			}
	
			// .newWidth {
			// 	// width: 48rem !important;
			// }
	
			.searchInput {
				input {
					height: 2rem;
					line-height: 2;
					background: transparent;
					border-bottom: 0.06rem solid rgba(255, 255, 255, 0.6);
					width: 0;
					transition-duration: 0.5s;
					transition-property: all;
					transition-timing-function: ease;
					transition-delay: 0s;
					outline: none;
					color: #fff;
					font-size: 0.88rem;
	
					&.focus {
						width: 48rem !important;
					}
				}
			}
	
			.iconGroup {
				width: 6rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #000;
				font-weight: bold;
				margin-left: 2rem;
	
				i {
					cursor: pointer;
					color: #000;
					font-weight: bold;
				}
	
				img {
					cursor: pointer;
					width: 1.2rem;
				}
			}
		}
	}
	
	.center {
		color: black;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 40%;
	
		.serch-select {
			width: 16%;
		}
	
		.serch-select ::v-deep .el-input__inner {
			border-radius: 0;
			background: white;
			border: none;
			border-bottom: 1px solid black;
			color: black;
		}
	
		.serch-input ::v-deep .el-input__inner {
			border-radius: 0;
			background: white;
			border: none;
			color: black;
			border-bottom: 1px solid black;
		}
	}
	.el-select-dropdown__item.selected {
		color: #08c19d;
	}
	
	.el-button.is-circle {
		background: none;
		border: none;
		color: black;
		padding: 0.6rem 0 0 0;
	}
</style>
<style></style>
